<template>
    <div class="overview-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="metric-card">
            <div class="metric-content">
              <div class="metric-icon" style="background-color: #e6f7ff">
                <i class="el-icon-cpu" style="color: #1890ff"></i>
              </div>
              <div class="metric-info">
                <div class="metric-value">{{ summary.nodes }}</div>
                <div class="metric-label">节点总数</div>
              </div>
            </div>
            <div class="metric-trend">
              <span class="trend-up"><i class="el-icon-top"></i> 2 台运行中</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="metric-card">
            <div class="metric-content">
              <div class="metric-icon" style="background-color: #f6ffed">
                <i class="el-icon-box" style="color: #52c41a"></i>
              </div>
              <div class="metric-info">
                <div class="metric-value">{{ summary.pods }}</div>
                <div class="metric-label">运行中Pod</div>
              </div>
            </div>
            <div class="metric-trend">
              <span class="trend-down"><i class="el-icon-bottom"></i> 3 个异常</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="metric-card">
            <div class="metric-content">
              <div class="metric-icon" style="background-color: #fff7e6">
                <i class="el-icon-s-operation" style="color: #fa8c16"></i>
              </div>
              <div class="metric-info">
                <div class="metric-value">{{ summary.deployments }}</div>
                <div class="metric-label">部署数量</div>
              </div>
            </div>
            <div class="metric-trend">
              <span class="trend-up"><i class="el-icon-top"></i> 1 个新增</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="metric-card">
            <div class="metric-content">
              <div class="metric-icon" style="background-color: #fff0f6">
                <i class="el-icon-warning" style="color: #f5222d"></i>
              </div>
              <div class="metric-info">
                <div class="metric-value">{{ summary.errors }}</div>
                <div class="metric-label">异常状态</div>
              </div>
            </div>
            <div class="metric-trend">
              <span class="trend-warning"><i class="el-icon-warning"></i> 需要关注</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<script>
export default {
  name: 'Overview',
  props: {
    summary: {
      type: Object,
      required: true,
      default: () => ({
        nodes: 0,
        pods: 0,
        deployments: 0,
        errors: 0
      })
    }
  },
  methods: {
    // 安全获取节点数量
    getNodesCount() {
      try {
        return this.summary?.nodes || 0;
      } catch (error) {
        console.error('获取节点数量时出错:', error);
        return 0;
      }
    },
    
    // 安全获取Pod数量
    getPodsCount() {
      try {
        return this.summary?.pods || 0;
      } catch (error) {
        console.error('获取Pod数量时出错:', error);
        return 0;
      }
    },
    
    // 安全获取部署数量
    getDeploymentsCount() {
      try {
        return this.summary?.deployments || 0;
      } catch (error) {
        console.error('获取部署数量时出错:', error);
        return 0;
      }
    },
    
    // 安全获取错误数量
    getErrorsCount() {
      try {
        return this.summary?.errors || 0;
      } catch (error) {
        console.error('获取错误数量时出错:', error);
        return 0;
      }
    }
  },
  computed: {
    // 计算属性提供安全的数据访问
    safeSummary() {
      try {
        return {
          nodes: this.summary?.nodes || 0,
          pods: this.summary?.pods || 0,
          deployments: this.summary?.deployments || 0,
          errors: this.summary?.errors || 0
        };
      } catch (error) {
        console.error('处理概览数据时出错:', error);
        return {
          nodes: 0,
          pods: 0,
          deployments: 0,
          errors: 0
        };
      }
    }
  }
}
</script>

<style scoped>
.overview-cards {
  margin-bottom: 20px;
}
.overview-cards {
  margin-bottom: 20px;
}

.metric-card {
  border-radius: 8px;
  border: none;
}

.metric-content {
  display: flex;
  align-items: center;
}

.metric-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-right: 15px;
}

.metric-info {
  flex: 1;
}

.metric-value {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.metric-label {
  font-size: 14px;
  color: #606266;
  margin-top: 5px;
}

.metric-trend {
  margin-top: 10px;
  font-size: 12px;
  text-align: right;
}
.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.trend-warning {
  color: #e6a23c;
}

</style>
